<template>
    <div class="bottomMain">
        <!-- <div class="leftSider">
            <span style="font-weight: bold;font-size: 18px;height: 76px;line-height: 76px;">{{ routerObj.meta.title}}</span>
            <el-divider></el-divider>
            <div class="List">
                <template v-for="item, ind1 in childrenRouter" :key="ind1">
                    <template v-if="!item.children">
                        <p :class="ind1 == index1 ? 'color' : ''" style="padding-top: 30px!important;"  @click="handleVal(ind1,-1,item)">
                            <span style="display:inline-block;width:3px;height:14px;"
                                :class="ind1 == index1 ? 'bg1' : 'bg2'"></span>
                            {{ item.meta.title }}
                        </p>
                    </template>
                    <template v-else>
                        <p :class="ind1 == index1 ? 'color' : ''" @click="handleVal1(ind1, item)"
                            style="padding-top: 30px!important;">
                            <span style="display:inline-block;width:3px;height:14px;"
                                :class="ind1 == index1 ? 'bg1' : 'bg2'"></span>
                            {{ item.meta.title }}
                        </p>
                    </template>
                    <div v-if="!item.noMenu&&item.children">
                        <p v-for="val, ind2 in item.children" :key="ind2"
                            style="padding-left: 20px;font-size: 16px!important;padding-top: 20px!important;"
                            :class="ind2 == index2 && ind1 == index1 ? 'color' : ''" @click="handleVal(ind1, ind2, val)">{{
                                val.meta.title }}</p>
                    </div>
                </template>
            </div>
        </div> -->
        <div class="rightContent">
            <div class="right-height">
                <span class="tab-title"></span>
                <el-breadcrumb :separator-icon="ArrowRight" v-if="route.meta.breadcrumbList">
                    <el-breadcrumb-item v-for="item in route.meta.breadcrumbList" :key="item.name" :class="item.color?'activeColor':''" :to="item.url?{ path: item.url }:''">{{ item.name }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-divider></el-divider>
            <div class="contentVier">
                <router-view />
            </div>
        </div>
    </div>
  </template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import routerListStore from "@/store/modules/routerList";
const routerList = routerListStore();
const route = useRoute();
const router = useRouter();
const routerPath = computed(() => routerList.routerPath);
const routerObj = computed(()=>{
  return router.currentRoute.value.matched.filter(item=>item.name=='informationRetrieval')[0]
})
const childrenRouter = computed(()=>{
   return  routerObj.value.children.filter(item=>item.name!='infoIndex');
})
const index1 = ref(-1);
const index2 = ref(-1);

watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
    if(router.currentRoute.value.path&&router.currentRoute.value.path.includes('informationRetrieval') ){

    if(router.currentRoute.value.path == '/informationRetrieval/infoIndex'){
        index1.value = -1;
        index2.value = -1;
    }else{
        childrenRouter.value.forEach((item,index)=>{
            if(item.path == router.currentRoute.value.path){
                index1.value = index;
            }
            item.children&&item.children.forEach((val,ind)=>{
              if(val.path == router.currentRoute.value.path){
                index1.value = index;
                index2.value = ind;
              }
              val.children&&val.children.forEach((value)=>{
                if(value.path == router.currentRoute.value.path){
                    index1.value = index;
                    index2.value = ind;
                }
              })
            })
        })
    }
}

    // highlight();
}, { immediate: true })

function handleVal1(ind1, item) {
    index1.value = ind1;
    index2.value = -1;
    router.push(item.path)
}

function handleVal(ind1, ind2, val) {
    // index1.value = ind1;
    // index2.value = ind2;
    router.push(val.path)

}

// 给当前菜单高亮
function highlight() {
    childrenRouter.value.children.forEach((item, ind1) => {
        if (item.children) {
            if (routerPath.value.includes(item.path)) {
                index1.value = ind1;
            }
            item.children.forEach((val, ind2) => {
                if (routerPath.value.includes(val.path)) {
                    index2.value = ind2;
                }
            })
        } else {
            if (routerPath.value == item.path) {
                index1.value = ind1;
                index2.value = -1;
            }
        }
    })
}
</script>

<style scoped lang="scss">
.bottomMain {
    width: 1280px;
    margin: 20px auto 0px;
    display: flex;
    flex-direction: row;
    background-color: #fafafa;
    box-shadow: 0 0 6px 3px #e3e6ea;

    .leftSider {
        font-size: 18px !important;
        padding: 0px 40px;
        width: 450px;
        min-width: 300px;
        background-color: #fff;
        box-shadow: 0 0 6px 3px #e3e6ea;
        height: 100%;
        margin-left: 80px;
        margin-right: 15px;
        overflow: hidden;

        p {
            margin: 0px !important;
        }

        .color {
            color: #107ce5
        }

        .bg1 {
            background: #107ce5;
        }

        .bg2 {
            background: #333;
        }
    }

    .rightContent {
        width: 1280px;
        min-height: calc(100vh - 190px);
        padding: 0px 40px;
        flex: 1;
        flex-direction: column;
        background-color: #fff;
        // box-shadow: 0 0 6px 3px #e3e6ea;

        .right-height {
            line-height: 50px;
            height: 50px;
            display: flex;
            flex-direction: row;
            align-items: center;

            :deep(.el-breadcrumb) {
                line-height: 50px !important;
                height: 50px !important;
                font-size: 16px;

                .activeColor {
                    span {
                        color: #1c6ede !important;
                    }
                }
            }
        }

        .contentVier {
            flex: 1;
            width: 100%;
        }
    }

    .el-divider--horizontal {
        margin: 0px;
    }
}
.tab-title {
    display: inline-block;
    width: 4px;
    height: 20px;
    background: #107ce5;
    margin-right: 8px;
}
</style>
  